{"id":11865,"date":"2017-12-07T14:00:04","date_gmt":"2017-12-07T14:00:04","guid":{"rendered":"https:\/\/www.gravityforms.com\/?p=11865"},"modified":"2021-05-10T20:14:32","modified_gmt":"2021-05-11T00:14:32","slug":"styling-forms-wordpress","status":"publish","type":"post","link":"https:\/\/www.gravityforms.com\/styling-forms-wordpress\/","title":{"rendered":"Tips For Styling Beautiful Forms"},"content":{"rendered":"

Have you ever seen a design that makes you want to rip your eyes out? Yeah, we all have. In fact, even a beautiful website with an ugly form on a single page can ruin the entire experience. We\u2019ve seen a lot of forms (including the millions powered by Gravity Forms), and we still cringe when we see a really ugly one.<\/p>\n

Don\u2019t want to have one of those ugly forms that makes us want to bleach our eyes? Here\u2019s our tips on styling your forms to make your ugly duckling into a swan.
\n<\/p>\n

Use the Customizer<\/h2>\n

\"Styling<\/p>\n

The easiest way to style elements of your website when using WordPress is by utilizing the Customizer, and the same still holds true when styling Gravity Forms.<\/p>\n

By default, you might not notice many options for Gravity Forms within the WordPress Customizer interface, but that can easily be remedied with the use of a 3rd-party plugin, Styler for Gravity Forms<\/a>.<\/p>\n

Once installed and activated, you\u2019ll see additional options in the customizer when viewing pages that contain embedded forms.<\/p>\n

Learn How to Blend In<\/h2>\n

\"Styling<\/p>\n

While Gravity Forms does a great job of inheriting styles put forth by most WordPress themes, sometimes things don\u2019t quite look ideal.<\/p>\n

If you pay close attention to the styling of your theme, you can quickly match your existing look and feel within just a few minutes. Sometimes, only a few minutes of tweaking things can make a dramatic difference and can even increase your form\u2019s conversion rates<\/a>.<\/p>\n

Be Bold<\/h3>\n

\"Styling<\/p>\n

When you need to draw attention to something life a form, be sure it stands out. The design surrounding your page should be subtle enough not to draw attention to it, and the visitor\u2019s eyes should be drawn toward the form.<\/p>\n

To better understand how to do this, take a look at various forms on the websites you visit most. Pay close attention to how the page flows, and how your eyes are pulled from one element to another.<\/p>\n

...Yet Tasteful<\/h3>\n

\"Tasteful<\/p>\n

Remember all of those annoying marquee text blocks and animated GIFs back in the 90s? Don\u2019t let your site look like that.<\/p>\n

There are plenty or resources everywhere that can help you get a better handle on what to do (and not to do) with your form styling, such as one of my favorites: The Non-Designer\u2019s Design Book<\/a>.<\/p>\n

Learn CSS (or get better at it)<\/h2>\n

\"Styling<\/p>\n

CSS is how the internet is styled, and it\u2019s a good idea to sharpen your CSS skills when dealing with anything displayed on a website. CSS is constantly evolving and the things you can do with it are continually expanding.<\/p>\n

Not only will you be able to make better looking forms, but you\u2019ll also improve your web design skills overall. Your code will become much cleaner and most design changes to your WordPress themes will become much easier.<\/p>\n

Don\u2019t know where to start? Check out Code Academy<\/a> for a great free course that will get you through the basics and beyond.<\/p>\n

Once you\u2019ve honed your CSS skills, you\u2019ll want to check out our CSS class documentation<\/a>.<\/p>\n

Utilize Your Browser\u2019s Inspector<\/h2>\n

\"\"<\/p>\n

If you need to know what CSS rules apply to a particular element, the inspector in either Google Chrome<\/a> or Mozilla Firefox<\/a> will do the trick. It\u2019s already built into your browser, why not use it?<\/p>\n

When you need to find any information about an element on the page, just right-click that it and click on Inspect Element.<\/p>\n

By utilizing the inspector, you\u2019ll be able to get the CSS selector for the element, as well as see the styles that apply to it. For testing out quick changes, you can also modify every one of those styles and see what it will look like live on your screen.<\/p>\n","protected":false},"excerpt":{"rendered":"

Have you ever seen a design that makes you want to rip your eyes out? Yeah, we all have. In fact, even a beautiful website with an ugly form on a single page can ruin the entire experience. We’ve seen a lot of forms (including the millions powered","protected":false},"author":204039,"featured_media":11874,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[],"yoast_head":"\nStyling Beautiful Forms that Increase Conversions | Gravity Forms<\/title>\n<meta name=\"description\" content=\"No one is attracted to an ugly form! Here are some tips from Gravity Forms on how to style beautiful forms that will draw user's attention.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.gravityforms.com\/styling-forms-wordpress\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tips For Styling Beautiful Forms\" \/>\n<meta property=\"og:description\" content=\"Have you ever seen a design that makes you want to rip your eyes out? Yeah, we all have. In fact, even a beautiful website with an ugly form on a single\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.gravityforms.com\/styling-forms-wordpress\/\" \/>\n<meta property=\"og:site_name\" content=\"Gravity Forms\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/GravityForms\" \/>\n<meta property=\"article:published_time\" content=\"2017-12-07T14:00:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-05-11T00:14:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2017\/12\/denise-johnson-463885.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"5760\" \/>\n\t<meta property=\"og:image:height\" content=\"2889\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2017\/12\/denise-johnson-463885.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@GravityForms\" \/>\n<meta name=\"twitter:site\" content=\"@GravityForms\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.gravityforms.com\/#organization\",\"name\":\"Gravity Forms\",\"url\":\"https:\/\/www.gravityforms.com\/\",\"sameAs\":[\"https:\/\/www.facebook.com\/GravityForms\",\"https:\/\/twitter.com\/GravityForms\"],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.gravityforms.com\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2018\/06\/gravity_forms_logo.jpg\",\"contentUrl\":\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2018\/06\/gravity_forms_logo.jpg\",\"width\":268,\"height\":294,\"caption\":\"Gravity Forms\"},\"image\":{\"@id\":\"https:\/\/www.gravityforms.com\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.gravityforms.com\/#website\",\"url\":\"https:\/\/www.gravityforms.com\/\",\"name\":\"Gravity Forms\",\"description\":\"WordPress Contact Forms\",\"publisher\":{\"@id\":\"https:\/\/www.gravityforms.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/www.gravityforms.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.gravityforms.com\/styling-forms-wordpress\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2017\/12\/denise-johnson-463885.jpg\",\"contentUrl\":\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2017\/12\/denise-johnson-463885.jpg\",\"width\":5760,\"height\":2889},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.gravityforms.com\/styling-forms-wordpress\/#webpage\",\"url\":\"https:\/\/www.gravityforms.com\/styling-forms-wordpress\/\",\"name\":\"Styling Beautiful Forms that Increase Conversions | Gravity Forms\",\"isPartOf\":{\"@id\":\"https:\/\/www.gravityforms.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.gravityforms.com\/styling-forms-wordpress\/#primaryimage\"},\"datePublished\":\"2017-12-07T14:00:04+00:00\",\"dateModified\":\"2021-05-11T00:14:32+00:00\",\"description\":\"No one is attracted to an ugly form! Here are some tips from Gravity Forms on how to style beautiful forms that will draw user's attention.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.gravityforms.com\/styling-forms-wordpress\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.gravityforms.com\/styling-forms-wordpress\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.gravityforms.com\/styling-forms-wordpress\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Gravity Forms\",\"item\":\"https:\/\/www.gravityforms.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blog\",\"item\":\"https:\/\/www.gravityforms.com\/category\/blog\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Tips For Styling Beautiful Forms\"}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/www.gravityforms.com\/styling-forms-wordpress\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.gravityforms.com\/styling-forms-wordpress\/#webpage\"},\"author\":{\"@id\":\"https:\/\/www.gravityforms.com\/#\/schema\/person\/8b24a831453cc6d65a6546d612e84db1\"},\"headline\":\"Tips For Styling Beautiful Forms\",\"datePublished\":\"2017-12-07T14:00:04+00:00\",\"dateModified\":\"2021-05-11T00:14:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.gravityforms.com\/styling-forms-wordpress\/#webpage\"},\"wordCount\":646,\"commentCount\":6,\"publisher\":{\"@id\":\"https:\/\/www.gravityforms.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.gravityforms.com\/styling-forms-wordpress\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.gravityforms.com\/wp-content\/uploads\/2017\/12\/denise-johnson-463885.jpg\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.gravityforms.com\/styling-forms-wordpress\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.gravityforms.com\/#\/schema\/person\/8b24a831453cc6d65a6546d612e84db1\",\"name\":\"Jeff Matson\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/www.gravityforms.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/358414d5ccd2f8c8818920cd8e9a3e7a?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/358414d5ccd2f8c8818920cd8e9a3e7a?s=96&d=mm&r=g\",\"caption\":\"Jeff Matson\"},\"url\":\"https:\/\/www.gravityforms.com\/author\/user59e51636405391-81908773\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","_links":{"self":[{"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/posts\/11865"}],"collection":[{"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/users\/204039"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/comments?post=11865"}],"version-history":[{"count":0,"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/posts\/11865\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/media\/11874"}],"wp:attachment":[{"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/media?parent=11865"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/categories?post=11865"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gravityforms.com\/wp-json\/wp\/v2\/tags?post=11865"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}